﻿<cms-page-header cms-title="Create"
                 cms-parent-title="Directory"></cms-page-header>

<cms-form cms-name="mainForm" 
          ng-submit="vm.save()" 
          cms-loading="vm.formLoadState.isLoading">

    <!-- Default toolbar -->
    <cms-page-actions>

        <cms-button-submit class="main-cta"  cms-text="Save" ng-disabled="vm.mainForm.$invalid"></cms-button-submit>
        <cms-button cms-text="Cancel" ng-click="vm.cancel()"></cms-button>

    </cms-page-actions>

    <!-- Scrollable content area -->
    <cms-page-body cms-content-type="form">

        <cms-form-status></cms-form-status>

        <!--Page URL-->
        <cms-form-section cms-title="Directory url">

            <cms-form-field-text cms-title="Name"
                                 cms-model="vm.command.name"
                                 cms-description="A descriptive identifier, only used for managing the directory e.g. 'About the team' or 'Our products'"
                                 cms-change="vm.onNameChanged()"
                                 maxlength="64"
                                 required></cms-form-field-text>

            <cms-form-field-text cms-title="Url Path"
                                 cms-model="vm.command.urlPath"
                                 cms-description="Lowercase alpha-numeric characters and dashes only. E.g. 'about-the-team' or 'products'."
                                 pattern="^[a-zA-Z0-9-]+$"
                                 pattern-val-msg="Alpha-numeric characters and dashes only"
                                 maxlength="64"
                                 required></cms-form-field-text>

            <cms-form-field-directory-selector cms-model="vm.command.parentPageDirectoryId"
                                                   cms-title="Parent Directory"
                                                   cms-description="The parent under which to create this new directory"
                                                   cms-on-loaded="vm.onDirectoriesLoaded()"
                                                   required></cms-form-field-directory-selector>

        </cms-form-section>

    </cms-page-body>

</cms-form>